$(function(){

    // var index =0;
    // $(".listArrowsLeft").click(function () {
    //     index--;
    //     if (index < 0) {
    //         index = 4;
    //     }
    //     $(".goods").animate({ left: -580 * index })
    // })
    // var clientWidth = $(".goods1 li").width();
    // console.log(clientWidth);
    // var index = 0;
    
    // $(document).on("click",".listArrowsLeft",function () {
    //     index++;
    //     console.log(111, clientWidth * index);
    //     $(".goods1").animate({ left: -clientWidth * index })
    // })
    // $(document).on("click",".listArrowsRight",function () {
    //     index--;
    //     $(".goods1").animate({ left: -clientWidth * index })
    // })
    

    

    loadList();
    async function loadList() {

        var result = await searchRecomGoods();
        //console.log(result);
        var { status, list } = result;
        //console.log(status);
        if (status) {
            var html = "";
            list.forEach(({ id, goodsId, goodsName, goodsPrice, goodsImg, goodsNameEn }) => {
                html += `
                    <li>
                    <a href="../html/detail.html?gid=${goodsId}"><img src="https://www.origins.com.cn/${goodsImg}" alt=""></a>
                    <div class="brand_en"><a href="../html/detail.html?gid=${goodsId}">${goodsNameEn}</a></div>
                    <h2 class="brand_cb"><a href="../html/detail.html?gid=${goodsId}">${goodsName}</a></h2>
                    <div class="price">￥${goodsPrice}</div>
                    <div class="func">
                        <div class="addcar"><a href="../html/detail.html?gid=${goodsId}">添加到购物车</a></div>
                        <div class="detail"><a href="../html/detail.html?gid=${goodsId}">产品详情</a></div>
                    </div>
                </li>
                `
            })
            $(".goods").html(html);
        }
    }


    loadList1();
    async function loadList1() {

        var result = await searchRankGoods();
        //console.log(result);
        var { status, list } = result;
        //console.log(status);
        if (status) {
            var html = "";
            list.forEach(({ id, goodsId, goodsName, goodsPrice, goodsImg, goodsNameEn }) => {
                html += `
                    <li>
                    <a href="../html/detail.html?gid=${goodsId}"><img src="https://www.origins.com.cn/${goodsImg}" alt=""></a>
                    <div class="brand_en"><a href="../html/detail.html?gid=${goodsId}">${goodsNameEn}</a></div>
                    <h2 class="brand_cb"><a href="../html/detail.html?gid=${goodsId}">${goodsName}</a></h2>
                    <div class="price">￥${goodsPrice}</div>
                    <div class="func">
                        <div class="addcar"><a href="javascript:;">添加到购物车</a></div>
                        <div class="detail"><a href="../html/detail.html?gid=${goodsId}">产品详情</a></div>
                    </div>
                </li>
                `
            })
            $(".goods1").html(html);
        }
    }

    $(".list2").click(function(){
        $(".goodsa").css({display:"block"});
        $(".goodsb").css({ display: "none" });
        $(".list2").css({fontWeight:"700"});
        $(".list1").css({ fontWeight: "500" });
    })

    $(".list1").click(function () {
        $(".goodsb").css({ display: "block" });
        $(".goodsa").css({ display: "none" });
        $(".list1").css({ fontWeight: "700" });
        $(".list2").css({ fontWeight: "500" });
    })


    first();
    second();

 

   function first(){
       var width = $(document).width();
       $(".banner").width(width);
       $(".swiper li").width(width);
       $(".swiper img").width(width);


       var clientWidth = $(".banner").width();
       var index = 0;
       var timer = null;
       autoPlay();
       $(".ballList li").click(function () {
           $(this).addClass("active").siblings().removeClass("active");

           // 下标刚好和向左滚动的图片对应  1 => 向左滚一张  2 => 向左滚两张
           index = $(this).index();
           //console.log(index);
           $(".swiper").animate({ left: -clientWidth * index })
       })
       $(".arrowsLeft").click(function () {
           index--;
           if (index < 0) {
               index = 4;
           }
           $(".ballList li").eq(index).addClass("active").siblings().removeClass("active");
           $(".swiper").animate({ left: -clientWidth * index })
       })
       $(".arrowsRight").click(function () {
           index++;
           if (index > 4) {
               index = 0;
           }
           $(".ballList li").eq(index).addClass("active").siblings().removeClass("active");
           $(".swiper").animate({ left: -clientWidth * index })
       })
       $(".banner").hover(function () {  // 移入时触发
           clearInterval(timer);
       }, function () { //移出时触发
           autoPlay();
       })
       function autoPlay() {
           clearInterval(timer);
           timer = setInterval(function () {
               index++;

               // 如果是最后一张  把0改为活跃状态
               // index == $(".swiper li").length - 1?0:index
               $(".ballList li").eq(index == 5 ? 0 : index).addClass("active").siblings().removeClass("active");

               // 如何实现最后一张切换到第一张?  障眼法
               // 在最后一张之后在拼接第一张(第五张) => 第四张 滚动到 第五张 切换到 第一张 
               $(".swiper").animate({ left: -clientWidth * index }, function () {
                   // 回调函数 每次运动完执行

                   // 第四张 滚动到 第五张 
                   if (index >= 5) {
                       $(".swiper").css({ left: 0 });   //  切换到 第一张 
                       index = 0;
                   }
               });


           }, 3000);
       }
   }

    
    function second() {

        var width = $(document).width();
        $(".banner1").width(width);
        $(".swiper1 li").width(width);
        $(".swiper1 img").width(width);

        var clientWidth = $(".banner1").width();
        var index = 0;
        var timer = null;
        autoPlay();
        $(".ballList1 li").click(function () {
            $(this).addClass("active1").siblings().removeClass("active1");

            // 下标刚好和向左滚动的图片对应  1 => 向左滚一张  2 => 向左滚两张
            index = $(this).index();
            //console.log(index);
            $(".swiper1").animate({ left: -clientWidth * index })
        })
        $(".arrowsLeft1").click(function () {
           
            index--;
            if (index < 0) {
                index = 4;
            }
            $(".ballList1 li").eq(index).addClass("active1").siblings().removeClass("active1");
            $(".swiper1").animate({ left: -clientWidth * index })
        })
        $(".arrowsRight1").click(function () {
   
            index++;
            if (index > 4) {
                index = 0;
            }
            $(".ballList1 li").eq(index).addClass("active1").siblings().removeClass("active1");
            $(".swiper1").animate({ left: -clientWidth * index })
        })
        $(".banner1").hover(function () {  // 移入时触发
            clearInterval(timer);
        }, function () { //移出时触发
            autoPlay();
        })
        function autoPlay() {
            clearInterval(timer);
            timer = setInterval(function () {
                index++;

                // 如果是最后一张  把0改为活跃状态
                // index == $(".swiper li").length - 1?0:index
                $(".ballList1 li").eq(index == 5 ? 0 : index).addClass("active1").siblings().removeClass("active1");

                // 如何实现最后一张切换到第一张?  障眼法
                // 在最后一张之后在拼接第一张(第五张) => 第四张 滚动到 第五张 切换到 第一张 
                $(".swiper1").animate({ left: -clientWidth * index }, function () {
                    // 回调函数 每次运动完执行

                    // 第四张 滚动到 第五张 
                    if (index >= 5) {
                        $(".swiper1").css({ left: 0 });   //  切换到 第一张 
                        index = 0;
                    }
                });


            }, 3000);
        }
    }

})